<template>
    <div class="home">
        <div class="header">
            <div class="logo">
                <!-- <img src="../assets/imgs/logo.png" alt="" /> -->
                <div class="logo_img">
                    <img :src="logo" alt="" />
                </div>
                <div class="logo_name">{{ title }}</div>
            </div>
            <div class="title">{{ name }}</div>
            <div class="time">
                <div class="time_ty">
                    <img src="../assets/imgs/time.png" alt="" />
                </div>
                <div class="time_day">
                    <p class="time_day_sfm">{{ currentTime }}</p>
                    <p class="time_day_nyr">{{ currentDate }}</p>
                </div>
            </div>
        </div>
        <div class="main">
            <div class="table_header">
                <div>姓名</div>
                <div>项目</div>
                <div>PT师</div>
                <div>医生</div>
                <div>预约时间</div>
                <div>状态</div>
            </div>
            <div class="content">
                <vue-seamless-scroll :data="swiperData" class="table_list" :class-option="classOption">
                    <div class="table_item" v-for="(item, index) in swiperData" :key="index" :style="{ color: item.status == 4 ? '#97ADC6FF' : '' }">
                        <div class="line"></div>

                        <div class="table_item_top">
                            <div>
                                {{ item.realname ? item.realname : item.customer_name }}
                            </div>
                            <div class="line-1">
                                {{ item.project_name && item.project_name.length ? item.project_name.join(",") : "" }}
                            </div>
                            <div>{{ item.pt_name }}</div>
                            <div>{{ item.doctor_name }}</div>
                            <div class="line-1">{{ item.date }} {{ item.start_time }} - {{ item.end_time }}</div>
                            <div
                                :style="{
                                    color: item.status == 3 ? '#FB341F' : item.status == 2 ? '#EB9C12FF' : '',
                                }"
                            >
                                {{ getStatusName(item.status) }}
                            </div>
                        </div>
                        <!-- <div class="line"></div> -->
                    </div>
                </vue-seamless-scroll>
                <!-- <div class="table_list">
          <div class="table_item" v-for="(item, index) in 20" :key="index">
            <div class="table_item_top">
              <div>姓名点</div>
              <div class="line-1">
                项目，项目，项目，项目,项目，项目，项目，项目
              </div>
              <div>姓名点</div>
              <div>姓名点</div>
              <div class="line-1">04/10 10:00 - 11:00</div>
              <div>已完成</div>
            </div>
            <div class="line"></div>
          </div>
        </div> -->
                <img class="imgLeft" src="../assets/imgs/leftBottom.png" alt="" />
                <img class="imgright" src="../assets/imgs/rightBottom.png" alt="" />
            </div>
        </div>

        <div class="fottor">
            <img src="../assets/imgs/laba.png" alt="" />
            <span>一步入店，乐享舒适；欢迎您的光临，让我们为您竭诚服务！ 请您在等候区等待医生！</span>
        </div>
    </div>
</template>

<script>
// @ is an alias to /src
import { fitChartSize } from "@/utils/fitSize.js";
import vueSeamlessScroll from "vue-seamless-scroll";
import { getAppointmentData, getConfigData } from "@/api/index.js";
export default {
    name: "HomeView",
    components: { vueSeamlessScroll },
    data() {
        return {
            currentTime: "",
            classOption: {
                step: 0.4, // 数值越大速度滚动越快
                limitMoveNum: 6, // 开始无缝滚动的数据量 this.dataList.length
                hoverStop: true, // 是否开启鼠标悬停stop
                direction: 1, // 0向下 1向上 2向左 3向右
                openWatch: true, // 开启数据实时监控刷新dom
                singleHeight: 82, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                singleWidth: 82, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
            },
            swiperData: [],
            intervalId: null,
            queryParams: {
                page: 1,
                limit: 1000000,
                store_id: "",
                type: "1",
            },
            name: "",
            logo: "",
            title: "",
        };
    },
    beforeDestroy() {
        // 清除定时器，防止内存泄露
        clearInterval(this.intervalId);
    },
    created() {
        //获取日期 时间
        this.updateTime();
        //获取url参数
        let params = this.getUrlParam();
        this.queryParams.store_id = params.store_id;
        this.name = params.store_name;

        //获取配置数据
        this.getSetting();

        //获取数据列表
        this.getList();
        // 设置定时器每5分钟（300000毫秒）请求一次接口
        this.intervalId = setInterval(this.getList, 300000);
    },
    mounted() {
        //
    },
    computed: {
        //获取当前日期
        currentDate() {
            return new Date().toLocaleDateString();
        },
    },
    methods: {
        //获取当前时间
        updateTime() {
            setInterval(() => {
                this.currentTime = new Date().toLocaleTimeString();
            }, 1000);
        },
        //获取地址栏参数 截取门店id
        getUrlParam() {
            let queryString = window.location.href; //匹配目标参数
            // 如果查询字符串以?开头，则去掉它
            if (queryString.charAt(0) === "?") {
                queryString = queryString.slice(1);
            }
            queryString = queryString.slice(queryString.indexOf("?") + 1);
            // 将查询字符串转换为参数对象
            let params = {};
            let pairs = queryString.split("&");
            for (var i = 0; i < pairs.length; i++) {
                let pair = pairs[i].split("=");
                let key = decodeURIComponent(pair[0]);
                let value = decodeURIComponent(pair[1] || ""); // 如果没有值，则默认为空字符串
                params[key] = value;
            }
            console.log(params);
            // 返回参数对象
            return params;
        },

        //获取logo 简称 后台配置
        async getSetting() {
            let res = await getConfigData({
                type: "global",
            });
            this.logo = res.data.logo;
            this.title = res.data.short;
            console.log(res, "aa");
        },

        //获取预约列表
        async getList() {
            let res = await getAppointmentData(this.queryParams);
            console.log(res);
            this.swiperData = res.data.data;
            console.log();
        },
        //返回对应状态
        getStatusName(status) {
            switch (status) {
                case 1:
                    return "待到店";
                case 2:
                    return "未到店";
                case 3:
                    return "已到店";
                case 4:
                    return "已完成";
                case 5:
                    return "已取消";
                default:
                    return "未知";
            }
        },
    },
};
</script>
<style lang="scss" scoped="scoped">
@import "@/scss/util.scss";
@import "@/scss/rem.scss";

/*
 直接使用 vw 和 vh 函数，将像素值传进去，得到的就是具体的 vw vh 单位
 */
.home {
    width: vw(1920);
    height: vh(1080);
    background-color: #d8e4f0;
    background: linear-gradient(to bottom, #d8e4f0, #bcd0eb);
}
.header {
    width: vw(1920);
    height: vh(94);
    background-color: #0b6ad4;
    background-image: url("../assets/imgs/backgroundHeader.png");
    background-size: vw(1464) vh(112);
    background-repeat: no-repeat;
    background-position: vw(229) vh(9);
    display: flex;
    align-items: center;
    // display: flex;
    // align-items: center;
    // justify-content: space-between;

    .logo {
        width: vw(240);
        height: vh(40);
        margin-left: vw(34);
        display: flex;
        align-items: center;
        font-size: vw(30);
        font-family: "KaiTi_GB2312";
        font-weight: 500;
        color: #ffffff;
        .logo_img {
            width: 40%;
            height: 100%;
            margin-right: vw(10);
            img {
                width: 100%;
                height: 100%;
            }
        }
    }

    .title {
        // margin-left: vw(517);
        margin-left: vw(400);
        width: vw(600);
        font-family: Source Han Sans CN;
        font-weight: 800;
        font-size: vw(36);
        text-align: center;
        color: #ffffff;
        background: linear-gradient(0deg, rgba(255, 255, 255, 0.88) 27.9541015625%, rgba(158, 199, 255, 0.88) 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .time {
        // margin-left: vw(565);
        margin-left: vw(455);
        display: flex;
        align-items: center;
        .time_ty {
            width: vw(61);
            height: vh(61);
            background-image: url("../assets/imgs/timeBackground.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            vertical-align: bottom;
            img {
                width: vw(34);
                height: vh(34);
                vertical-align: bottom;
            }
        }
        .time_day {
            height: vh(61);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-around;

            .time_day_sfm {
                font-family: Source Han Sans CN;
                font-weight: bold;
                color: #ffffff;
                font-size: vw(24);
            }
            .time_day_nyr {
                font-family: Source Han Sans CN;
                font-weight: 400;
                font-size: vw(14);
                color: #ffffff;
            }
        }
    }
}

.main {
    width: vw(1920);
    height: vh(899);
    padding: vh(15) vw(21) vh(0) vw(21);

    .table_header {
        width: vw(1879);
        height: vh(82);
        background-image: url("../assets/imgs/tableTop.png");
        background-repeat: no-repeat;
        background-size: cover;
        display: flex;
        align-items: center;
        justify-content: space-around;
        font-family: Source Han Sans CN;
        font-weight: bold;
        font-size: vw(30);
        color: #ffffff;

        div {
            width: calc(vw(1879 / 6));
            text-align: center;
        }
    }
    .content {
        width: vw(1879);
        height: vh(802);
        background-image: url("../assets/imgs/background.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        // border: 1px solid #f4f9ff;
        position: relative;
        .imgLeft {
            position: absolute;
            left: 0;
            bottom: 0;
            width: vw(32);
            height: vh(32);
        }

        .imgright {
            position: absolute;
            right: 0;
            bottom: 0;
            // width: vw(28);
            // height: vh(25);
            width: vw(32);
            height: vh(32);
        }
    }
    .table_list {
        width: vw(1879);
        height: vh(802);
        overflow: hidden;
    }

    .table_item {
        width: vw(1879);
        height: vh(82);

        // border: 1px solid black;
        font-family: Source Han Sans CN;
        font-weight: bold;
        font-size: vw(26);
        color: #2c7ed9;

        .table_item_top {
            width: vw(1879);
            height: vh(82);
            display: flex;
            align-items: center;
            justify-content: space-around;

            div {
                width: calc(vw(1879 / 6));
                text-align: center;
            }
        }

        .line {
            width: vw(1799);
            height: vh(2);
            border: 1px solid #bbd6f8;
            margin: 0 auto;
        }
    }
}

.fottor {
    display: flex;
    align-items: center;
    margin-top: vh(28);
    img {
        width: vw(34);
        height: vh(34);
        margin-left: vw(46);
    }

    span {
        margin-left: vw(19);
        font-family: Source Han Sans CN;
        font-weight: 500;
        font-size: vw(28);
        color: #fb341f;
    }
}
</style>
